<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 设置表格的宽度
			 */
			table{
				width: 300px;
				/*居中*/
				margin: 0 auto;
				/*边框*/
				/*border:1px solid black;*/
				/*
				 * table和td边框之间默认有一个距离
				 * 	通过border-spacing属性可以设置这个距离
				 */
				/*border-spacing:0px ;*/
				
				/*
				 * border-collapse可以用来设置表格的边框合并
				 * 如果设置了边框合并，则border-spacing自动失效
				 */
				border-collapse: collapse;
				/*设置背景样式*/
				/*background-color: #bfa;*/
			}
			
			/*
			 * 设置边框
			 */
			td , th{
				border: 1px solid black;
			}
			
			/*
			 * 设置隔行变色  odd 奇数  even  偶数
			 */
			tr:nth-child(even){
				background-color: #bfa;
			}
			
			/*
			 * 鼠标移入到tr以后，改变颜色
			 */
			tr:hover{
				background-color: #ff0;
			}
			
			
		</style>
	</head>
	<body>
		<!--
			table是一个块元素
		-->
		
		<table>
			<tr>
				<!--
					可以使用th标签来表示表头中的内容，
						它的用法和td一样，不同的是它会有一些默认效果
				-->
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>住址</th>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
			<tr>
				<td>1</td>
				<td>孙悟空</td>
				<td>男</td>
				<td>花果山</td>
			</tr>
			<tr>
				<td>2</td>
				<td>猪八戒</td>
				<td>男</td>
				<td>高老庄</td>
			</tr>
			<tr>
				<td>3</td>
				<td>沙和尚</td>
				<td>男</td>
				<td>流沙河</td>
			</tr>
			<tr>
				<td>4</td>
				<td>唐僧</td>
				<td>男</td>
				<td>女儿国</td>
			</tr>
		</table>
		
	</body>
</html>
